<!--  -->
<template>
  <div class="category_bar">
      <ul>
          <li v-for="(item,index) in category" :key="index" class="category_item" @click="itemClick(index)" 
          :class="{active:index===cindex}">{{item.title}}</li>
      </ul>
     
  </div>
</template>

<script>

export default {
    props:{
        category:{
            type:Array,
            default(){
                return[]
            }
        }
    },
data(){
    return{
        cindex:0
    }
},
    methods:{
        itemClick(index){
            this.cindex=index
            this.$emit('showContent',index)
            
            
        }
    }
 
  
}

</script>
<style scoped>
.category_bar{
    padding-left: 10px;
    width: 80px;
    text-align: center;
 
}
.category_item{
    margin:20px 0;
    font-size: 14px;
    list-style: none;
}
.active{
    color: var(--color-tint);
    border-left:2px solid var(--color-tint);
}
</style>